<template>
  <div>
    <van-nav-bar :title="title + '页面'" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        :error="false"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        :error="false"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          {
            required:
              /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
            message: '请填写密码',
          },
        ]"
      />
      <div style="margin: 16px">
        <!-- 登录按钮 注册按钮 插槽 -->
        <slot name="btn"></slot>
      </div>
    </van-form>
    <!-- 登陆页面  注册页面插槽 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: { title: String },
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      this.$emit("submit", values);
    },
  },
};
</script>

<style lang='less'>
.link {
  float: right;
  margin-right: 9px;
  font-size: 12px;
}
</style>